<template>
    <div>
        <Row>
            <Card>
                <div class="top-tool-bar">
                    <Select v-model="model1" style="width:150px" placeholder="请选择省份">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>

                    <Select v-model="model1" style="width:150px" placeholder="请选择城市" >
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Select v-model="model1" style="width:150px" placeholder="请选择地区" >
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>

                    <Select v-model="model1" style="width:150px" placeholder="请选择站点" >
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>

                    <Select v-model="model1" style="width:150px" placeholder="请选择名称">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{item.label }}</Option>
                    </Select>

                    <Button type="primary" icon="checkmark-circled">确定</Button>
                    <Button type="primary" icon="gear-b" @click.prevent.stop="showInstall()">监控设置</Button>
                </div>
                <Modal
                        v-model="showInstallModal"
                        title="监控设置"
                        ok-text="保存"
                        width="650"
                        @on-cancel="cancelInstallModal">
                    <Form :model="detail" label-position="right" :label-width="80"  >
                        <Form-item label="ip">
                            <Input v-model="detail.input1"></Input>
                        </Form-item>
                        <Form-item label="端口">
                            <Input v-model="detail.input2"></Input>
                        </Form-item>
                        <Form-item label="用户名">
                            <Input v-model="detail.input3" type="textarea" :rows="4" ></Input>
                        </Form-item>
                        <Form-item label="密码">
                            <Input v-model="detail.input4" type="textarea" :rows="4" ></Input>
                        </Form-item>
                    </Form>
                </Modal>
            </Card>
        </Row>
    </div>

</template>
<script>
    import api from '@/libs/util';
    export default {
        data() {
            return {
                list: {},
                cityList: [
                    {
                        value: '',
                        label: ''
                    }
                ],
                model1:'',
                detail:{
                    input1:'',
                    input2:'',
                    input3:'',
                    input4:'',
                },
                showInstallModal:false,
            }
        },
        methods: {
            showInstall() {
                this.showInstallModal = true;
            },
            cancelInstallModal() {
                this.showInstallModal = false;
            },
        }
    }
</script>
